/**
 * @file filter
 * @author liaoxuezhi@baidu.com
 */
/* eslint fecs-indent: [0, "space", 2, 2] */

import * as React from 'react';
import {
  PureComponent,
  PropTypes
} from 'react';
import {render, filter, renderChildren} from '../renderer';
import * as cx from 'classnames';
import * as assign from 'object-assign';
import * as omit from 'lodash/omit';
import * as pick from 'lodash/pick';
import FormItem from './form-item';

@FormItem({
  type: 'panel',
  haveAllElements: false,
  attachForm: false,
  validateSchema: "http://amis.baidu.com/schemas/form.json#/definitions/panel"
})
export default class PanelFormItem extends PureComponent {
  static propTypes = {
    className: PropTypes.string,
    controls: PropTypes.any
  };

  static defaultProps = {
    className: 'panel-default',
    bodyClassName: 'panel-body',
    formClassName: 'panel-body'
  };

  renderActions() {
    let {
      $path,
      actions,
      submitText,
      controls,
      loading,
      onRequestAction,
      mode,
      data
    } = this.props;

    if (actions && Array.isArray(actions) && actions.length) {
      return actions ? actions.map((action, index) => (
        render(`${$path}/action`, action, {
          key: index,
          disabled: action.disabled || loading,
          data: data,
          onRequestAction
        })
      )) : null
    } else if (typeof actions === 'undefined' && submitText && mode !== 'inline' && controls
      && !controls.filter(control => control.type === 'submit' || control.type === 'button-toolbar').length) {
      actions = submitText;
    } else {
      return null;
    }

    if (typeof actions === 'string') {
      actions = {
        label: actions,
        primary: true
      };
    }

    actions.type = 'submit';
    return render(`${$path}/action`, actions, {
      key: 'actions',
      disabled: loading,
      onRequestAction
    });
  }

  renderFooter() {
    const actions = this.renderActions();

    if (!actions) {return null}

    return actions;
  }

  render() {
    const {
      $path,
      title,
      data,
      mode,
      horizontal,
      horizontalDeeper,
      bodyClassName,
      formClassName,
      footer,
      body,
      footerClassName,
      className,
      formMode
    } = this.props;

    const footerChild = this.renderFooter();
    const schema = pick(this.props, ['controls', 'filedSet', 'tabs', 'horizontal', 'horizontalDeeper', 'collapsable', 'submitText']);
    const subProps = omit(this.props, ['title', 'bodyClassName', 'footer', 'footerClassName', 'formClassName', 'className']);

    return (
      <div className={cx('panel', className)}>
        {title ? (
          <div className="panel-heading"><h3 className="panel-title">{filter(title, data)}</h3></div>
        ) : null}

        {body ? (
          <div className={bodyClassName}>{renderChildren($path, body, subProps)}</div>
        ) : null}

        <div className={formClassName}>
          {render(`${$path}/basic-form`, schema, assign(subProps, {
            elementsOnly: true,
            mode: mode || formMode
          }))}
        </div>

        {footerChild ? (
          <div className={footerClassName}>{footerChild}</div>
        ) : null}

        {footer && (
          <div className={footerClassName}>
            {renderChildren($path, footer, subProps)}
          </div>
        )}
      </div>
    );
  }
}
